<script setup lang="ts">
import { computed } from 'vue';

const props: any = defineProps<{
    ujt: any;
}>();

const { $global, $fn } = props.ujt;

if (!$global.msg) {
    $global.msg = {
        key: 'as-pop-msg',
        tm: null,
        stat: 0,
        data: [],
        bak: [],
        cur: {},
        fn: msgfn,
    };
    function msgfn(item: any) {
        let reTmp: any = null;
        if (item === 1) {
            if ($global?.msg?.data?.length) {
                reTmp = $global.msg.data.shift();
            }
        } else {
            if (
                !$global?.msg?.data?.length ||
                !$global?.msg?.data?.find(
                    (el: any) => el.con === item.con && el.tit === item.tit
                )
            ) {
                item.tm = $fn.As.getTime();
                $global.msg.data.push(item);
            }
        }
        $fn.As.localSet($global.msg.key, $global.msg.data);
        if (reTmp) {
            return reTmp;
        }
    }
}

function closeMsg() {
    if (!$global.msg.cur?.noclose) {
        $global.msg.stat = 0;
        // 这里可以处理当前接收消息列表
        $global.msg.bak.push($global.msg.fn(1));
        if ($global.msg.bak.length > 100) {
            $global.msg.bak.splice(80);
        }
        clearTimeout($global.msg.tm);
    }
}
const msgData: any = computed(() => {
    if ($global.msg.data.length) {
        $global.msg.cur = $global.msg.data[0];
        if (!$global.msg.stat) {
            $global.msg.stat = 1;
            clearTimeout($global.msg.tm);
            $global.msg.tm = setTimeout(() => {
                closeMsg();
            }, $global.msg.cur?.time || 3000);
        }
        return $global.msg.cur;
    }
    return null;
});

if (!$global.msg?.data?.length) {
    const localMsg: any = $fn.As.toObj($fn.As.localGet($global.msg.key));
    localMsg && ($global.msg.data = localMsg);
}
</script>

<template>
    <div
        class="as-pop-msg-area"
        v-if="msgData"
        @pointerdown="closeMsg()"
        @touchstart="$fn.As.eStop"
        :style="msgData?.maskstyle || {}"
    >
        <div :class="'as-pop-msg' + (msgData?.type || '')">
            <div class="as-pop-msg-tit" v-if="msgData?.tit">
                {{ msgData.tit }}
            </div>
            <div class="as-pop-msg-con" v-if="msgData?.con">
                {{ msgData.con }}
            </div>
            <div class="as-pop-msg-tm" v-if="msgData?.tm">
                [{{ msgData.tm }}]
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.as-pop-msg-area {
    user-select: none;
    cursor: pointer;
    position: fixed;
    z-index: 102;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    // align-items: flex-start;
    // pointer-events: none;
    .as-pop-msgok,
    .as-pop-msgerr,
    .as-pop-msg {
        display: inline-flex;
        flex-direction: column;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        animation: 1s linear 0s alternate msgzoom;
        width: auto;
        height: auto;
        padding: 5px 12px;
    }
    .as-pop-msgok {
        background-color: var(--cx0);
        border: 1px solid var(--cx4);
        color: var(--cx8);
    }
    .as-pop-msgerr {
        background-color: var(--cz0);
        border: 1px solid var(--cz4);
        color: var(--cz8);
    }
    .as-pop-msg-tit {
        font-weight: bold;
        text-align: center;
    }
    .as-pop-msg-con {
        text-align: center;
    }
    .as-pop-msg-tm {
        font-size: x-small;
        text-align: center;
        opacity: 0.4;
    }
}
</style>
